<template>
	<div id="opinion">
		<!-- 其他代码省略 -->
		<h3>借阅排行榜</h3>
		<el-divider></el-divider>
		<el-table :data="tableData" v-loading:loading border style="width: 100%">
			<el-table-column type="index" label="排名">
			</el-table-column>
			<el-table-column prop="name" label="书名">
				<!-- <template slot-scope="scope">
					<img :src="scope.row.thumbnail" min-width="70" height="70" />
				</template> -->
			</el-table-column>
			<el-table-column prop="sum" label="借阅数">
			</el-table-column>
		</el-table>
<!-- <el-pagination
    layout="prev, pager, next"
    :total="50">
  </el-pagination> -->
		<!-- 其他代码省略 -->

	</div>
</template>

<script>
	export default {
		name: "Table",
		data() {
			return {
				tableData: []
			}
		},
		methods:{
			getTable(){
				this.$http.get("http://localhost:8989/rank").then(res=>{
					console.log(res);
					if (res.data.status !== 200) return this.$message.error("获取图书列表失败");
					this.tableData = res.data.data;
					console.log(res.data.data)
					
				}).catch(e=>{
					console.log(e);
				})
			}
		},
		created() {
			this.getTable();
		}


	}
</script>

<style scoped="scoped">
	#opinion{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -53%);
		text-align: center;
		width: 600px;
	}
</style>
